<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="线条" name="1">
      <el-row>
        <el-col :span="8"><el-text>Width</el-text></el-col>
        <el-col :span="12">
          <el-slider :min="1" :max="5" :step="1" v-model="globalGridAttr.strokeWidth" @input="onStrokeWidthChange" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ globalGridAttr.strokeWidth }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Color</el-text></el-col>
        <el-col :span="14">
          <el-input type="color" v-model="globalGridAttr.stroke" style="width: 100%" @input="onStrokeChange" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Connector</el-text></el-col>
        <el-col :span="14">
          <el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">
            <el-option value="normal" label="Normal" />
            <el-option value="smooth" label="Smooth" />
            <el-option value="rounded" label="Rounded" />
            <el-option value="jumpover" label="Jumpover" />
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><el-text>Label</el-text></el-col>
        <el-col :span="14">
          <el-input v-model="globalGridAttr.label" style="width: 100%" @input="onLabelChange" />
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { FlowGraph } from "../../../graph/index";
import { Edge } from "@antv/x6";
import { defineComponent, inject, watch, ref } from "vue";

export default defineComponent({
  name: "Index",
  setup() {
    const activeTab = ref("1");
    const globalGridAttr: any = inject("globalGridAttr");

    const id: any = inject("id");

    let curCell: Edge;

    watch(
      [() => id.value],
      () => {
        const { graph } = FlowGraph;
        const cell = graph.getCellById(id.value) as Edge;
        if (!cell || !cell.isEdge()) {
          return;
        }
        curCell = cell;
        const connector = cell.getConnector() || {
          name: "normal"
        };
        globalGridAttr.stroke = cell.attr("line/stroke");
        globalGridAttr.strokeWidth = cell.attr("line/strokeWidth");
        globalGridAttr.connector = connector.name;
        globalGridAttr.label = cell.getLabels().length > 0 ? (cell.getLabels()[0]?.attrs as any).text.text || "" : "";
      },
      {
        immediate: true,
        deep: false
      }
    );

    const onStrokeWidthChange = (val: number) => {
      globalGridAttr.strokeWidth = val;
      curCell?.attr("line/strokeWidth", val);
    };

    const onStrokeChange = () => {
      curCell?.attr("line/stroke", globalGridAttr.stroke);
    };

    const onConnectorChange = (val: string) => {
      globalGridAttr.connector = val;
      curCell?.setConnector(val);
    };

    const onLabelChange = () => {
      // 先清除现有标签，再添加新标签
      curCell.setLabels([]);
      if (globalGridAttr.label) {
        curCell.appendLabel({
          attrs: {
            text: {
              text: globalGridAttr.label
            }
          },
          position: {
            distance: 0.5
          }
        });
      }
    };

    return {
      activeTab,
      globalGridAttr,
      onStrokeWidthChange,
      onStrokeChange,
      onConnectorChange,
      onLabelChange
    };
  }
});
</script>

<style lang="scss" scoped></style>
